<template>
  <el-container class="home_container">
    <el-header class="head">
      <div>
        <img src="../../assets/鸡蛋.png" alt="" class="home_pic">
        <span>eggBlog</span>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" active-text-color="#409EFF">
        <el-menu-item index="1" >主页</el-menu-item>
        <el-menu-item index="2" @click="totype">分类</el-menu-item>
        <el-menu-item index="3" @click="toperson">个人中心</el-menu-item>
        <el-menu-item index="4" @click="tomanage">管理</el-menu-item>
      </el-menu>
      <div class="home_input">
       <el-col :span="20"  >
       <!-- <el-input
        placeholder="SerchBlogs"
        v-model="inputTitle"  @keyup.enter.native="search(inputTitle)">
        <i slot="prefix" class="el-input__icon el-icon-search" @click="search(inputTitle)"></i>
        </el-input> -->
        <a-input-search placeholder="SerchBlogs" style="width: 200px" @search="search(inputTitle)" v-model="inputTitle"/>
      </el-col>
      </div>
      <div class="line"></div>
    <!-- <a style="font-size:15px;position:relative;top:18px" @click="toconfirm()">{{status}}</a> -->
    <el-button type="text" @click="open">{{status}}</el-button>
    
    </el-header>
    <el-container>
      <el-aside width="300px" class="aside">
        <strong>推荐专题</strong>
        <br><br>
        <template>
          <a-list item-layout="horizontal" :data-source="data1">
          <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
            <a-list-item-meta :description="item.type">
              <a slot="title" @click="toblog(item)" >{{ item.title }}</a>
              <a-avatar slot="avatar" :src="item.avatar" />
            </a-list-item-meta>
          </a-list-item>
          </a-list>
        </template>
        <div class="container">
          <div class="foot1">
            <div href="#" class="m-text-thin">Email：onestarlr@hotmail.com</div>
            <div href="#" class="m-text-thin">QQ：316392836</div>
          </div>
          <div class="foot2">
            <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >关注公众号</div>
            <img src="../../assets/7.png"   class="wechatimage" alt="" >
          </div>
          <div class="foot3">
            <div style="font-size: large;font-weight: bold" class="ui inverted m-text-thin m-text-spaced " >问题交流（QQ群）</div>
            <img src="../../assets/6.jpg"  class="QQimage" alt="">
          </div>
        </div>
      </el-aside>
      <el-main class="main">
        <div class="block" id="recommend">
          <span class="demonstration"><strong>热门话题</strong></span>
          <br>
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in imagebox" :key="item.id">
              <div class="thumbnail">
                <img :src="item.idView" class="image">
                <p>{{item.news}}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div>
          <strong>最新文章</strong>
        </div>
        <!-- 文章列表 -->
        <div class="article">
        <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
          <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
            <template v-for="{ type, text } in actions" slot="actions">
        <span :key="type">
          <a-tooltip>
      <template slot="title">
      点赞数
       </template>
      <!-- <a-icon :type="type" style="margin-right: 8px ;" v-if="flag[index] === true" @click="thumb(item,index)"/> -->
      <img src="../../assets/已点赞.png" alt="" style="margin-right: 8px;width: 16px;height: 16px">
    </a-tooltip>   
          {{ listData[index].thumbsUp }}
        </span>
            </template>
            <img
              slot="extra"
              width="272"
              alt="logo"
              src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
            />
            <a-list-item-meta :description="item.type">
              <a slot="title"  @click="toblog(item)">{{ item.title }}</a>
              <a-avatar slot="avatar" :src="item.avatar" />
            </a-list-item-meta >
            <a @click="toblog(item)" class="article">{{ item.content }}</a>
          </a-list-item>
        </a-list>
        </div>


      </el-main>
    </el-container>

  </el-container>

</template>

<script>
const data1 = [];
// for (let i = 0; i < 8; i++) {
//   data1.push({
//       title: ``,
//       avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
//       type:'',
//       content:
//         '',
//   });
// }
const listData = [];
// for (let i = 0; i < 23; i++) {
//   listData.push({
//     title: ``,
//     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
//     type:
//       '',
//     content:
//       '',
//   });
// }


export default {
  data() {
    return {
      status:'未登陆',
      inputTitle:'',
      index:[],
      data1,
      activeIndex: '1',
      activeIndex2: '1',
      imagebox: [{id: 0, idView: require('../../assets/1.jpg'),news: "且慢评他功与过"},
        {id: 1, idView: require('../../assets/2.jpg'),news:"众生皆可称卓荦"},
        {id: 2, idView: require('../../assets/3.jpg'),news:"二十二夜意悱恻"},
        {id: 3, idView: require('../../assets/4.jpg'),news:"待吾归乡且细说"}
      ],

      // 浏览器宽度
      screenWidth: 0,
      listData,
      pagination: {
        onChange: page => {
          console.log(page);
        },
        pageSize: 5,
      },
      actions: [
        { type: 'like-o', text: ' ' },
      ],
    }
    },
  created() {
      this.show()
     this.validatestatus()
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth =  window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () =>{
      this.screenWidth =  window.innerWidth;
      this.setSize();
    }
    // this.getData(res => {
    //   this.loading = false;
    //   this.data = res.results;
    // });
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    toblog(item){
      window.sessionStorage.setItem('number',item.number)
      this.$router.push('/blog2')
    },
    totype(){
      this.$router.push('/type')
    },
    async show(){
      const {data:res1} = await this.$http.get('http://localhost:8081/blog/browserallblog');
      const {data:res2} = await this.$http.get('http://localhost:8081/blog/hotblog');
      this.listData = res1.data;
       this.listData.sort(function(a,b){
   //降序
      //  return a.time < b.time ? 1 : -1
         return a.publishTime < b.publishTime ? 1 : -1
   });
      this.index = res1.data;
      this.data1=res2.data;
       this.data1.sort(function(a,b){
   //降序
      //  return a.time < b.time ? 1 : -1
         return a.publishTime < b.publishTime ? 1 : -1
   });
    },
    search(inputTitle){
      window.sessionStorage.setItem('query',inputTitle)
      this.$router.push('/search')
    },
    tomanage(){
      if(window.sessionStorage.getItem('token')!=null)
      {
        this.$router.push('/list')
      }
      else if(window.sessionStorage.getItem('admintoken')!=null)
      {
        this.$router.push('/manage')
      }
      else{
        this.$message.warning('请先进行登陆')
        this.$router.push('/login')
      }
      },
      toperson(){
        if(window.sessionStorage.getItem('token')!=null||window.sessionStorage.getItem('admintoken')!=null)
        {
          this.$router.push('/infoside')
        }
        else{
           this.$message.warning('请先进行登陆')
            this.$router.push('/login')
        }
      },     
   open() {
     if(this.status == '未登陆'){
       this.$router.push('/login')
       this.$message.warning('请先进行登陆')
     }
     else{
               this.$confirm('此操作将退出当前登陆状态,是否退出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message.success('退出成功')
          window.sessionStorage.clear()
          this.validatestatus()
        }).catch(() => {
         
        });
     }

      },
    validatestatus(){
       if(window.sessionStorage.getItem('token')!=null || window.sessionStorage.getItem('admintoken')!=null){
        this.status = '退出登录'
      }
      else{
        this.status = '未登陆'
      }
    },
    toperson(){
      this.$router.push('/infoside')
    }
  }}
</script>
<style scoped>
.wechatimage{
  height:100px;
  width: 100px;
}
.QQimage{
  height:100px;
  width: 100px;
}

.foot1{
  width: 50px;
  height: 50px;
  margin-left:50px;
  margin-bottom: 20px;
}
.foot2{
  margin-left: -50px;
  margin-bottom: 20px;
}
.foot3{
  margin-left: -50px;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: absolute;
  bottom: -875px;
  width: 300px;
  height: 300px;
  background-color: #FFFFFF;
}
.image{
  height: 280px;
  width: 610px;
}
.home_container{
  height: 100%;
  width: 100%;
  background-color: #F2F2F2;
}
.home_input{
  text-align: right;
  display: flex;
  align-items: center;
}
.el-input__icon{
  display: flex;
  margin-left: -10px;
}
.el-header{
  background-color: Transparent;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  font-size: 20px;
}

.div{
    display: flex;
    align-items: center;}
    span{
      margin-left: 15px;
    }


.el-main{
  background-color: #FFFFFF;
  margin-top: 10px;
  margin-left: 10px;
}
.el-aside{
  background-color: #FFFFFF;
  margin-top: 10px;
}
.home_pic{
  height: 50px;
  width: 50px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.demo-loadmore-list {
  min-height: 350px;
}
.head{
  background-color: #FFFFFF;
}
.article{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
